<template>
<div>
  <div v-if="md">
<div v-html="md" />
  </div>
</div>
</template>

<script>
import marked from 'marked'
import 'highlight.js/styles/github.css';
export default {
  name: "pre-md",
  props:{
    content:String
  },
  data(){
    return{
      md:undefined
    }
  },
  mounted: function () {
    marked.setOptions({
      renderer: new marked.Renderer(),
      highlight: function(code, lang) {
        const hljs = require('highlight.js');
        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
        return hljs.highlight(code, { language }).value;
      },
      pedantic: false,
      gfm: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false
    });


    this.md = marked(this.content)


  }

}
</script>

<style >
code{
  background:none !important;

}
pre{
  background-color: #f2f2f2;
  overflow: auto;

}
img{
  width: 100% !important;
  padding-bottom: 10px;
}
p{
  text-align: justify;
}
</style>